<template>
  <el-dialog v-model="visible" title="分配角色" :before-close="beforeClose">
    <el-form :model="ownForm">
      <el-form-item label="账号">
        <el-input v-model="ownForm.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="ownForm.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="ownForm.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="ownForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="ownForm.note" type="textarea" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="ownForm.status" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">Cancel</el-button>
        <el-button type="primary" @click="onConfirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { withDefaults, defineProps, defineEmits, ref, reactive, watch, type Ref } from "vue"




// 父传子传数据
const props = withDefaults(defineProps<{ visible: boolean; form: IAdminListItem }>(), {
  visible: false,
})


// 接收的form值和父组件是同一个，在自己用v-model绑定了，因此自己修改字段，父级的form会同步改变。所以需要做一层深拷贝。

const ownForm = ref({}) as Ref<IAdminListItem>
const ownFormOrigin = ref({}) as Ref<IAdminListItem>;



// 由于props.form的修改 在父级是 通过赋值实现的，地址会发生改变。所以需要用工厂函数返回这个对象————监听：()=>props.form。
// 如果props.form的地址没有改变，只是修改了对象里的属性值，————监听：props.form 即可

// props是withDefault创建的对象。
// 同时监听props.form的地址变化 以及 props.form属性值变化。
watch([() => props.form, () => props.form.status], (newVal) => {
  console.log("watch");

  ownForm.value = { ...props.form };

  // 存一份初始值
  ownFormOrigin.value = { ...props.form };


})

// 父传子传方法（子传父）
const emits = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm", row: IAdminListItem): void;
}>()

// 子级的方法
const onCancel = () => {
  // 取消的时候恢复初始值——深拷贝，不会互相影响
  ownForm.value = { ...ownFormOrigin.value };
  // ownFormOrigin.value = {} as IAdminListItem;


  emits("cancel");
}
const onConfirm = () => {
  emits("confirm", ownForm.value);
}


//  自定义关闭dialog前的回调函数
const beforeClose = (done: any) => {
  // done是原来关闭dialog前默认会走的函数
  // done();
  onCancel();//走自定义的关闭dialog的方法
}


// 【】控制dialog显示隐藏
// 1 el-dialog
// 2 在父级组件定义显示隐藏dialog的bool值和方法。
// 3  父传子(bool值) + 子传父(触发父级方法)。
// 4 解决点击灰色背景关闭时 不走自定义显示隐藏方法---使用before-close属性。


// 【】点击编辑 ：父传子把表单当前行 传进dialog
// 1 子组件准备props接收表单数据 form
// 2 父组件传数据form
// 3 父组件的form从点击编辑时拿到

// 【】子传父将修改后的表单传给父级发送请求。
// 数据子传父
// 显示提示框
// 请求api
// 提示后再异步请求---async await


// 【】添加新用户
// 准备api，参数类型与已定义的IAdminItem一致，用类型断言(as)兼容
// 添加新用户。给子级对话框传入一个各属性为空的对象。后面逻辑和编译一致。
// 点击确认，返回父级，发送的请求不同了。--加一个是否添加的开关，做一个判断。
</script>